<template>
	<view class="personalcenter" :style="{'background-image':'url('+imgUrl+'news/bg.png'+')'}">
		<!-- 状态栏占位 -->
		<view class="status-contents">
			<view class="status top-view"></view>
		</view>
		<view style="height: 75rpx;"></view>
		<view class="personhead">
			<view class="personheadimg">
				<image @click="userInfo.avatar?lookAll():''" class="headimg"
					:src="userInfo.avatar?userInfo.avatar:configObj.logo"></image>
				<image class="headimgVip" v-if="userInfo.isVip==1" src="@/static/img/v.png" mode="widthFix"></image>
			</view>
			<view class="personheadcon">
				<view class="nickname">
					<view v-if="userInfo.nickname" @click="userInfo.avatar?lookAll():''" class="nicknameClass">
						{{userInfo.nickname}}
						<text @click.native="LevelBtn()"
							:class="['commentlisttopgrade','bg'+userInfo.level]">{{userInfo.levelName||''}}&nbsp;Lv{{userInfo.level||''}}&nbsp;</text>
					</view>
					<view v-else @click="loginBtn">
						未登录
					</view>
				</view>
				<view class="personinvite">
					<view class="personinviteone" @tap="personinviteFun(1)">
						积分:{{userInfo.integral?userInfo.integral:0}}
					</view>
				</view>
			</view>
			<!-- <image class="personheadset" :src="imgUrl+'sz.png'" mode="widthFix" @tap="setFun"></image> -->
		</view>
		<!-- <view class="myorderclass">
			<view class="myorderclasshead">
				<view class="left">个人相关</view>
				<view class="right" @tap="lookAll()">查看全部</view>
			</view>
			<view class="myorderclassbox">
				<view class="myorderclassli" @tap="lookAll()">
					<image class="myorderclassliimg" :src="imgUrl+'l1.png'"></image>
					<view class="myorderclassliname">
						浏览
					</view>
					<span>{{userInfo.sumBrowseCount?userInfo.sumBrowseCount:0}}</span>
				</view>
				<view class="myorderclassli" @tap="lookAll()">
					<image class="myorderclassliimg" :src="imgUrl+'l2.png'"></image>
					<view class="myorderclassliname">
						访客
					</view>
					<span>{{userInfo.sumVisitorCount?userInfo.sumVisitorCount:0}}</span>
				</view>
				<view class="myorderclassli" @tap="lookAll()">
					<image class="myorderclassliimg" :src="imgUrl+'l3.png'"></image>
					<view class="myorderclassliname">
						发布
					</view>
					<span>{{userInfo.sumReleaseNewsCount?userInfo.sumReleaseNewsCount:0}}</span>
				</view>
				<view class="myorderclassli" @tap="lookAll()">
					<image class="myorderclassliimg" :src="imgUrl+'l4.png'"></image>
					<view class="myorderclassliname">
						粉丝
					</view>
					<span>{{userInfo.sumFansCount?userInfo.sumFansCount:0}}</span>
				</view>
			</view>
		</view> -->

		<view class="kf kf-box" style="margin-top: 50rpx;">
			<view class="kfli" @tap="perclassFun('/page_wallet/orderList')">
				<image class="kfliimg" src="@/static/img/1.png" mode="widthFix"></image>
				<view class="kflitext">
					我的订单
				</view>
			</view>
			<view class="kfli" @click="showIsFrameBtn(true)">
				<image class="kfliimg" src="@/static/img/3.png" mode="widthFix"></image>
				<view class="kflitext">
					观演人
				</view>
			</view>
			<view class="kfli" @tap="perclassFun('/page_wallet/collect')">
				<image class="kfliimg" src="@/static/img/4.png" mode="widthFix"></image>
				<view class="kflitext">
					收藏
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<!-- <swiper class="swiperBox" :indicator-dots="indicatorDots" :autoplay="autoplay" indicator-active-color="#ffffff"
			indicator-color='rgba(238,238,238,1)' :interval="interval" :duration="duration">
			<swiper-item @click="goPage(item)" v-for="(item,index) in banner_list" :key="index">
				<image class="swiperBoxImg" v-if="item.rotateImage" :src="item.rotateImage"></image>
				<view v-else
					style="background-color: rgba(0,0,0.6);height:100%;width:100%;display: flex;align-items: center;justify-content: center;">
					<ad ad-intervals="30" :unit-id="item.unitId"></ad>
				</view>
			</swiper-item>
		</swiper> -->
		<!-- <view class="component__vip_box">
			<view class="component__vip flex f-jc-sb f-ai-c">
				<view class="vip__left flex f-ai-c">
					<image :src="imgUrl+'news/vip.png'" class="vip__left--img">
						<view class="vip__left--divider"></view>
						<view class="vip__left--content">{{userInfo&&userInfo.isVip==1?'尊贵的会员，您好':'多项特权待解锁'}} </view>
				</view>
				<view class="vip__button flex f-ai-c" @tap="perclassFun('/page_Personalcenter/vip')">
					立即查看
					<i class="iconfont icon-right"></i>

				</view>
			</view>
		</view> -->

		<view class="personalist">
			<view class="kf" style="background-color: #ffffff;">
				<!-- <view class="kfli" @tap="perclassFun('/page_wallet/collect')">
					<image class="kfliimg" :src="imgUrl+'userCenter/mycard.png'" mode="widthFix"></image>
					<view class="kflitext">
						我的收藏
					</view>
				</view> -->
				<view class="kfli" @tap="perclassFun('/page_wallet/uni_Addresslist')">
					<image class="kfliimg" :src="imgUrl+'userCenter/myaddress.png'" mode="widthFix"></image>
					<view class="kflitext">
						地点管理
					</view>
				</view>
				<view class="kfli" @tap="perclassFun('/page_wallet/uni_Personinfo')">
					<image class="kfliimg" :src="imgUrl+'userCenter/myset.png'" mode="widthFix"></image>
					<view class="kflitext">
						设置中心
					</view>
				</view>
				<view class="kfli" @tap="perclassFun('/page_wallet/qualification')">
					<image class="kfliimg" :src="imgUrl+'userCenter/myabout.png'" mode="widthFix"></image>
					<view class="kflitext">
						营业资质
					</view>
				</view>
				<view class="kfli" @tap="perclassFun('/page_wallet/report_type')">
					<image class="kfliimg" :src="imgUrl+'userCenter/mypraise.png'" mode="widthFix"></image>
					<view class="kflitext">
						意见反馈
					</view>
				</view>
			</view>
		</view>
		<button class="xcxkf" open-type="contact">
			<image class="xcxkfliimg" src="@/static/img/kefu.png" mode="widthFix"></image>

		</button>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
				imgUrl: this.$apiFun.imgUrl,
				host: this.$apiFun.host,
				kfWXShow: false,
				perlist: [{
						icon: 'userCenter/mycard.png',
						name: '我的帖子',
						url: '/page_Personalcenter/myInvitation'
					},
					// {
					// 	icon: 'userCenter/myshop.png',
					// 	name: '我的商铺',
					// 	url: '/page_Personalcenter/myShop'
					// },
					{
						icon: 'userCenter/myvip.png',
						name: '我的会员',
						url: '/page_Personalcenter/vip'
					},
					{
						icon: 'userCenter/myaddress.png',
						name: '地点管理',
						url: '/page_Personalcenter/uni_Addresslist'
					},
					{
						icon: 'userCenter/myset.png',
						name: '设置中心',
						url: '/page_Personalcenter/uni_Personinfo'
					},
					{
						icon: 'userCenter/myabout.png',
						name: '关于我们',
						url: '/webView/vHtml?id=' + 'ABOUT_ME' + '&title=' + '关于我们'
					},
					{
						icon: 'userCenter/mypraise.png',
						name: '意见反馈',
						url: '/page_Personalcenter/uni_report?title=' + '意见反馈'
					},
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				banner_list: [],
				localtokn: '',
				bj: this.$apiFun.imgUrl + 'bj.png',
				gzhModalShow: false,
			}
		},
		computed: {
			//login_status 0 未登录 、1临时微信登录 2已登录
			...mapGetters([
				'login_status',
				'userInfo',
				'configObj'
			])
		},
		onLoad() {

		},
		async onShow() {
			this.getTopRotateImageApiFun()
			if (this.login_status === 0 || this.login_status == 1) {
				return
			}
			await this.wxLoginUserInfoApiFun()
		},
		methods: {
			// 个人喜好弹窗
			async showLikeModel() {
				// 验证是否有关注公众号
				const isFrame = await this.queryTodayPublicAccountFrameApiFun()
				if (isFrame) {
					uni.showToast({
						title: '只有关注公众号，你才能开启个人喜好的设置',
						icon: 'none'
					})
					this.showIsFrameBtn(isFrame)
				} else {
					this.$refs['likeModel'].open()
				}

			},

			// 用户未关注公众号弹框
			queryTodayPublicAccountFrameApiFun() {
				var that = this;
				return new Promise((resove) => {
					const param = {
						type: ''
					}
					this.$apiFun.getApi(this.$api.queryTodayPublicAccountFrameApi, param, function(res) {
						const {
							code,
							data
						} = res
						if (code == 200) {
							resove(data.isFrame)
						}
					}, function(err) {});
				})
			},
			// 轮播
			getTopRotateImageApiFun() {
				var that = this;
				var param = {
					type: 'PERSONAL_CENTER'
				}
				this.$apiFun.getApi(this.$api.getTopRotateImageApi, param, function(res) {
					const {
						code,
						data
					} = res
					if (code == 200) {
						if (data.rotateImageVoList.length > 0) {
							data.rotateImageVoList.forEach((item) => {
								item.rotateImage = item.rotateImage
							})
							that.banner_list = data.rotateImageVoList
							that.interval = Number(data.rotateTime) * 1000
						} else {}
					}
				}, function(err) {});
			},
			// 跳转轮播页面
			goPage(item) {
				if (item.returnUrl) {
					uni.navigateTo({
						url: item.returnUrl
					})
				}
			},
			// 弹出关注公众号弹框
			showIsFrameBtn(val) {
				this.gzhModalShow = val
			},
			// 个人中心接口
			wxLoginUserInfoApiFun() {
				var that = this;
				const param = {}
				return new Promise((resove, reject) => {
					that.$apiFun.getApi(that.$api.wxLoginUserInfoApi, param, function(res) {
						const {
							code,
							data
						} = res
						if (code == 200) {
							that.$store.dispatch('setUserInfos', data)
							resove()
						}
					}, function(err) {});
				})
			},
			// 等级列表
			LevelBtn() {
				uni.navigateTo({
					url: '/page_Personalcenter/levelList'
				})
			},
			// 查看全部
			lookAll() {
				uni.navigateTo({
					url: '/page_Personalcenter/centerInfo'
				})
			},
			// 积分查看
			personinviteFun(el) {
				uni.navigateTo({
					url: '/page_home/uni_signIn'
				});
			},
			// 登录
			loginBtn() {
				this.$apiFun.localstoryPage()
			},
			// 个人资料
			setFun() {
				uni.navigateTo({
					url: '/page_Personalcenter/uni_Personinfo'
				});
			},
			// 余额
			overageFun() {
				uni.navigateTo({
					url: '../Personblock/uni_Countmoney'
				});
			},
			closeModal() {
				this.kfWXShow = false
			},
			goPageFun() {
				let url = ''
				if (this.login_status === 0 || this.login_status == 1) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，是否前往登录页面登录？',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_Personalcenter/uni_Logins'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				/*
				 *  @isPartner
				 * 0 不是合伙人
				 * 1 合伙人
				 * 2 审核中
				 * */
				if (this.userInfo.isPartner == '0' || this.userInfo.isPartner == null) {
					url = '/page_sale/saleInfo'
				} else if (this.userInfo.isPartner == '1') {
					url = '/page_sale/saleIndex'
				} else if (this.userInfo.isPartner == '2') {
					uni.showToast({
						title: '审核中，请耐心等待',
						icon: 'none'
					})
					this.kfWXShow = true
					return
				}
				uni.navigateTo({
					url: url,
				});

			},
			// 个人中心分类操作
			perclassFun(url) {
				uni.navigateTo({
					url: url,
				});
			},
		}
	}
</script>

<style scoped lang="less">
	page {
		height: 100%;

		background-color: #f5f6f7;
	}

	/* 状态栏占位 */
	.status-contents {
		height: var(--status-bar-height);
	}

	.top-view {
		width: 100%;
		position: fixed;
		top: 0;
		height: var(--status-bar-height);
	}

	.kf-box {
		width: 90% !important;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 10rpx;

		.kfli {
			width: 33.3% !important;
		}
	}

	// 会员入口
	.component__vip_box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.component__vip {
			font-size: 30rpx;
			width: 100%;
			height: 90rpx;
			background: -webkit-linear-gradient(228deg, #3f1e10 0%, #100806 100%);
			background: -o-linear-gradient(228deg, #3f1e10 0%, #100806 100%);
			background: linear-gradient(222deg, #3f1e10 0%, #100806 100%);
			border-radius: 10rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.flex.f-ai-c,
			.inflex.f-ai-c {
				-webkit-box-align: center;
				-webkit-align-items: center;
				-ms-flex-align: center;
				align-items: center;

				image {
					width: 100rpx;
					height: 25rpx;
				}
			}

			.vip__left {
				display: flex;
				align-items: center;
				flex: 1;

				.vip__left--divider {
					width: 4rpx;
					height: 16rpx;
					background: #fdeac5;
					opacity: 0.74;
					margin: 0 8rpx;
				}

				.vip__left--content {
					font-size: 24rpx;
					font-weight: 400;
					color: #fdeac5;
				}
			}


			.vip__button {
				height: 48rpx;
				width: 150rpx;
				background: #fdeac5;
				border-radius: 4rpx;
				padding: 0 8rpx 0 2rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #2f2122;
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					color: #2f2122;
				}
			}

		}

	}

	/* // 轮播 */
	.swiperBox {
		margin: 20rpx auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 140rpx;
		width: 100%;

		.swiperBoxImg {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.personalcenter {
		height: 100%;
		// background-color: #EBECF0;
		background-repeat: no-repeat;
		background-size: 100% 400rpx;
	}

	.personhead {
		height: 150rpx;
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.personheadimg {
		width: 155rpx;
		height: 155rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;

		.headimg {
			border-radius: 150rpx;
			width: 150rpx;
			height: 150rpx;
			box-shadow: 0rpx 0 5rpx #999999;
		}

		.headimgVip {
			position: absolute;
			bottom: 0;
			right: 0;
			height: 25rpx;
			width: 50rpx;
		}
	}

	.personheadcon {
		width: 470rpx;
		padding-top: 28rpx;
		margin-left: 30rpx;
	}

	.personheadcon .nickname {
		font-size: 42rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-weight: bold;

		.nicknameClass {
			display: flex;
			align-items: flex-end;

			.iconfont {
				font-size: 28rpx;
				padding-left: 10rpx;
			}
		}
	}

	.commentlisttopgrade {
		font-family: "Verdana";
		font-style: italic;
		display: inline-block;
		padding: 5rpx 10rpx;
		line-height: 30rpx;
		align: center;
		font-size: 24rpx;
		color: white;
		margin-left: 10rpx;
	}

	.personinvite {
		display: flex;
		margin-top: 20rpx;

		.communityListNavTitleLeftTopImg {
			height: 40rpx;
			width: 40rpx;
			display: inline-block;
			margin: 0 10rpx;
		}

		.communityListNavTitleLeftTopImg1 {
			height: 40rpx;
			width: 75rpx;
			display: inline-block;
			margin: 0 10rpx;
		}

		.personinviteone {
			padding: 0 10rpx;
			box-sizing: border-box;
			white-space: nowrap;
			min-width: 160rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			margin-right: 15rpx;
			border-radius: 46rpx;
			background-color: #fd7c6b;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.personheadset {
		width: 48rpx;
		margin-top: 70rpx;
	}

	.mycontent {
		margin-top: 40rpx;
		margin-bottom: 50rpx;
		display: flex;
		text-align: center;
	}

	.myorderclass {
		width: 690rpx;
		margin: 30rpx auto 20rpx;
		background-color: #FFFFFF;
		border-radius: 22rpx;
		box-shadow: 0 3px 17px rgba(0, 0, 0, 0.1);

		.myorderclasshead {
			height: 94rpx;
			line-height: 34rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			border-bottom: 1px solid #efefef;
		}

		.myorderclasshead view {
			width: 50%;
		}

		.myorderclasshead .left {
			font-size: 34rpx;
			color: #2E2E2E;
		}

		.myorderclasshead .right {
			text-align: right;
			font-size: 26rpx;
			color: #979797;
			padding-right: 33rpx;
			box-sizing: border-box;
			background: url(@/static/img/godtail.png) no-repeat right;
			background-position-y: center;
			background-size: 13rpx 24rpx;
		}
	}


	.myorderclassbox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 40rpx;
		padding-bottom: 50rpx;

		.myorderclassli {
			position: relative;
			width: 20%;
			text-align: center;
		}

		.myorderclassliimg {
			width: 60rpx;
			height: 50rpx;
		}

		.myorderclassliname {
			height: 24rpx;
			line-height: 24rpx;
			font-size: 24rpx;
			color: #2e2e2e;
			margin-top: 10rpx;
		}

		.myorderclassli span {
			display: block;
			position: absolute;
			top: -18rpx;
			right: 26rpx;
			width: 30rpx;
			height: 30rpx;
			line-height: 26rpx;
			font-size: 22rpx;
			color: #999999;
			text-align: center;
			background-color: #FFFFFF;
		}
	}

	.personalist {
		width: 90%;
		margin: 20rpx auto;
		box-sizing: border-box;
	}

	.kf {
		width: 100%;
		margin: 20rpx auto;
		padding: 0 0 45rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-radius: 10rpx;

		.kfli::after {
			display: none;
			/* 去除按钮后的边框 */
		}

		.kfli {
			width: 25%;
			display: block;
			text-align: center;
			position: relative;
			background-color: transparent;
			border: none;
			line-height: initial;
			margin: 45rpx 0 0;
			padding: 0 30rpx;
			box-sizing: border-box;
			/* 去除内边距 */
			font-size: inherit;
			/* 字体大小继承 */
			color: inherit;

			/* 字体颜色继承 */
			.kfliimg {
				width: 45rpx;
				height: 45rpx;
				color: red;
				margin: 0 auto;
			}

			.kflitext {
				margin-top: 15rpx;
				font-size: 24rpx;
				color: #373C43;
			}
		}


			
	}
	
	.xcxkf::after {
		display: none;
		/* 去除按钮后的边框 */
	}
	.xcxkfliimg::after {
		display: none;
		/* 去除按钮后的边框 */
	}
	.xcxkf {
		position: fixed;
		right:0;
		bottom:30%;
		box-sizing: border-box;
		/* 去除内边距 */
		font-size: inherit;
		/* 字体大小继承 */
		color: inherit;
	
		/* 字体颜色继承 */
		.xcxkfliimg {
			width: 65rpx!important;
			height: 65rpx!important;
			color: red;
			margin: 0 auto;
		}
	
		.kflitext {
			margin-top: 15rpx;
			font-size: 24rpx;
			color: #373C43;
		}
	}
</style>